<template>
    <view class="container">
        <!-- 返回箭头和帮助文字 -->
        <view class="header">
            <text class="back-icon" @click="goBack">←</text>
            <text class="help-text">登录遇到困难？</text>
        </view>

        <!-- 圆形顶部图片 -->
        <view class="image-container">
            <!-- <image src="../../static/img/marriageHelp/love_login.webp" class="login-image" mode="aspectFill" /> -->
        </view>

        <!-- 欢迎文字和提示 -->
        <view class="welcome-text">
            <text class="welcome-title">Hey，欢迎来到月娘婚恋</text>
            <text class="welcome-subtitle">请登录建立征婚档案 只征婚 不交友</text>
        </view>

        <!-- 手机号输入框 -->
        <view class="input-group">
            <view class="input-wrapper">
                <text class="country-code">+86</text>
                <input class="phone-input" type="number" maxlength="11" placeholder="请输入手机号" v-model="phoneNumber" />
            </view>
            <text class="phone-hint">请输入11位手机号</text>
        </view>

        <!-- 验证码按钮 -->
        <button class="get-code-button" :disabled="!isPhoneValid" @click="getVerificationCode">获取验证码</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                phoneNumber: '', // 用户输入的手机号
            };
        },
        computed: {
            isPhoneValid() {
                // 简单校验手机号格式，确保是11位数字
                return this.phoneNumber.length === 11 && /^[0-9]+$/.test(this.phoneNumber);
            },
        },
        methods: {
            goBack() {
                uni.navigateBack(); // 返回上一页
            },
            getVerificationCode() {
                if (this.isPhoneValid) {
                    // 实现获取验证码的逻辑，例如发送验证码请求
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'none',
                    });
                } else {
                    uni.showToast({
                        title: '请输入正确的手机号',
                        icon: 'none',
                    });
                }
            },
        },
    };
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40rpx;
        background-color: #f7f7f7;
        height: 100vh;
    }

    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .back-icon {
        font-size: 40rpx;
        color: #333;
        padding: 10rpx;
    }

    .help-text {
        font-size: 24rpx;
        color: #666;
        padding: 10rpx;
    }

    .image-container {
        width: 160rpx;
        height: 160rpx;
        margin: 20rpx 0;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
    }

    .login-image {
        width: 100%;
        height: 100%;
    }

    .welcome-text {
        text-align: center;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
    }

    .welcome-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
    }

    .welcome-subtitle {
        font-size: 26rpx;
        color: #666;
    }

    .input-group {
        width: 100%;
        margin-top: 30rpx;
        margin-bottom: 20rpx;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
        border-radius: 25rpx;
        padding: 0 20rpx;
        height: 80rpx;
        box-shadow: inset 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .country-code {
        font-size: 30rpx;
        color: #333;
        margin-right: 10rpx;
    }

    .phone-input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        color: #333;
        background-color: transparent;
        border: none;
        outline: none;
    }

    .phone-hint {
        font-size: 22rpx;
        color: #aaa;
        margin-top: 10rpx;
        text-align: center;
    }

    .get-code-button {
        width: 100%;
        height: 80rpx;
        background: linear-gradient(145deg, #a55fee, #8e4cdc);
        color: #fff;
        font-size: 28rpx;
        border-radius: 25rpx;
        text-align: center;
        line-height: 80rpx;
        margin-top: 20rpx;
        box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s;
    }

    .get-code-button:disabled {
        background-color: #ddd;
        color: #aaa;
        box-shadow: none;
    }
</style>